<template>
  <div class="wrapper">
    <div class="login-panel-wrapper" :class="{ flip: flipFlag }">
      <div class="login-panel student">
        <aside>
          <svg
            t="1605180525483"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6811"
            width="100%"
            height="100%"
          >
            <path
              d="M766.34 873.813H257.66c-11.412 0-20.66-9.125-20.66-20.383V170.568c0-11.257 9.248-20.382 20.66-20.382h508.68c11.41 0 20.66 9.125 20.66 20.382V853.43c0 11.258-9.25 20.383-20.66 20.383z"
              fill="#1F95FF"
              p-id="6813"
            ></path>
            <path
              d="M271.502 201.272h480.996v628.696H271.502z"
              fill="#FFFFFF"
              p-id="6814"
            ></path>
            <path
              d="M626.113 242.537h-86.867l-9.303-11.568h-35.887l-9.305 11.568h-86.865c-8.818 0-15.994-7.174-15.994-15.993v-35.435c0-8.819 7.176-15.994 15.994-15.994h228.227c8.818 0 15.994 7.175 15.994 15.994v35.435c0 8.818-7.175 15.993-15.994 15.993z m-84.476-4.991h84.477c6.066 0 11.002-4.936 11.002-11.002v-35.435c0-6.067-4.936-11.003-11.002-11.003H397.887c-6.066 0-11.004 4.936-11.004 11.003v35.435c0 6.066 4.938 11.002 11.004 11.002h84.475l9.303-11.568h40.67l9.302 11.568z"
              fill="#BCC3C7"
              p-id="6815"
            ></path>
            <path
              d="M397.887 172.122h228.227v10.979H397.887z"
              fill="#E2E8EA"
              p-id="6816"
            ></path>
            <path
              d="M411.486 244.533h-13.6c-9.92 0-17.99-8.07-17.99-17.989v-11.786a4.49 4.49 0 1 1 8.982 0v11.786c0 4.966 4.041 9.006 9.008 9.006h13.6a4.492 4.492 0 0 1 0 8.983zM626.113 244.533h-13.6a4.491 4.491 0 1 1 0-8.983h13.6c4.967 0 9.006-4.04 9.006-9.006v-11.786a4.492 4.492 0 0 1 8.984 0v11.786c0.001 9.919-8.07 17.989-17.99 17.989z"
              fill="#303030"
              p-id="6817"
            ></path>
            <path
              d="M328.34 541.292h366.43v10.641H328.34zM328.34 595.057h366.43v10.64H328.34zM328.34 648.82h366.43v10.64H328.34zM328.34 702.584h366.43v10.641H328.34zM328.34 380h366.43v10.64H328.34zM328.34 433.764h366.43v10.64H328.34zM328.34 487.527h366.43v10.641H328.34zM328.34 756.349h366.43v10.642H328.34z"
              fill="#CCCCCC"
              p-id="6818"
            ></path>
            <path
              d="M428.527 291.652H411.34v-10.104h46.26v10.103h-17.188v46.8h-11.885v-46.799zM464.684 338.452v-56.903h41.883v10.103h-30v12.078h27.832v9.793h-27.832v14.826h31.317v10.104h-43.2zM548.397 298.619c-0.206-2.709-1.392-4.858-3.558-6.444-2.168-1.587-4.993-2.381-8.474-2.381-3.019 0-5.379 0.665-7.081 1.994-1.701 1.329-2.553 3.18-2.553 5.555 0 1.703 0.89 3.019 2.672 3.948 1.754 0.929 5.482 2.026 11.186 3.29 8.282 1.858 13.816 4 16.603 6.426 2.793 2.4 4.188 6.258 4.188 11.575 0 5.342-2.104 9.58-6.31 12.716-4.205 3.135-9.895 4.703-17.066 4.703-7.199 0-12.824-1.665-16.874-4.994-4.051-3.329-6.218-8.064-6.502-14.207h11.457c0.131 3.02 1.227 5.342 3.291 6.968 2.063 1.626 4.939 2.439 8.629 2.439 3.792 0 6.752-0.613 8.881-1.838 2.129-1.226 3.193-2.923 3.193-5.091 0-2.142-0.769-3.716-2.302-4.722-1.497-1.007-4.694-2.052-9.595-3.136-9.026-2.013-15.061-4.193-18.104-6.542-3.022-2.323-4.532-5.948-4.532-10.877 0-5.522 1.999-9.903 5.999-13.142 3.998-3.238 9.403-4.858 16.214-4.858 6.372 0 11.557 1.678 15.554 5.032 4 3.355 6.219 7.883 6.658 13.586h-11.574zM582.709 291.652h-17.188v-10.104h46.26v10.103h-17.188v46.8h-11.884v-46.799z"
              fill="#808080"
              p-id="6819"
            ></path>
            <path
              d="M375.664 696.282c41.081 22.109 86.893 36.943 132.703 45.296 24.085 4.391 48.726 6.978 73.223 5.818 21.016-0.995 43.706-4.543 62.284-15.021 17.841-10.063 30.876-27.966 40.387-45.653 11.73-21.813 19.169-46.007 23.214-70.375 7.004-42.193 5.581-89.71-16.492-127.557-32.709-56.082-102.169-71.699-162.577-67.062-67.448 5.177-136.042 31.836-186.526 77.372-21.779 19.644-39.688 43.947-49.304 71.81-2.224 6.444 2.479 13.657 8.73 15.377 6.887 1.894 13.156-2.296 15.377-8.73 0.545-1.581 1.117-3.15 1.715-4.712 0.3-0.782 0.616-1.56 0.931-2.336 1.111-2.736-1.129 2.604 0.055-0.107 1.47-3.364 3.112-6.65 4.849-9.884 3.416-6.357 7.369-12.417 11.644-18.227 0.523-0.71 1.057-1.412 1.59-2.114-2.017 2.653-0.156 0.219 0.227-0.264a181.525 181.525 0 0 1 3.4-4.135c2.526-2.995 5.169-5.891 7.875-8.724 5.341-5.593 11.039-10.838 16.947-15.824a236.621 236.621 0 0 1 6.631-5.373c-2.477 1.944 0.083-0.059 0.5-0.376a259.514 259.514 0 0 1 10.18-7.324c6.752-4.636 13.738-8.927 20.865-12.961 7.261-4.109 14.711-7.879 22.279-11.389 1.831-0.85 3.674-1.673 5.521-2.487 0.925-0.408 1.854-0.807 2.782-1.207 3.132-1.347-2.405 0.999 0.745-0.31a329.014 329.014 0 0 1 12.279-4.793c15.83-5.847 32.127-10.424 48.666-13.767a309.312 309.312 0 0 1 17.727-3.025c3.348-0.476-2.739 0.352 0.608-0.079a304.65 304.65 0 0 1 3.927-0.472 276.171 276.171 0 0 1 24.321-1.691 242.67 242.67 0 0 1 23.712 0.555c3.699 0.265 7.388 0.644 11.067 1.097 3.162 0.389-2.833-0.402 0.312 0.042 0.903 0.127 1.806 0.268 2.707 0.407 2.089 0.324 4.17 0.695 6.247 1.086a174.88 174.88 0 0 1 21.436 5.48 154.025 154.025 0 0 1 9.733 3.541c0.627 0.25 3.38 1.426 0.169 0.055a137.615 137.615 0 0 1 7.68 3.585c6.217 3.115 12.156 6.77 17.773 10.866 0.551 0.402 2.862 2.171 0.108 0.042a113.386 113.386 0 0 1 5.714 4.757c2.69 2.375 5.238 4.906 7.686 7.529a110.71 110.71 0 0 1 3.308 3.74c0.594 0.697 3.938 4.976 1.706 2.049 2.232 2.927 4.279 5.991 6.207 9.125 1.822 2.965 3.47 6.034 5.011 9.153a116.465 116.465 0 0 1 2.235 4.843c-1.355-3.088-0.106-0.237 0.128 0.342 0.455 1.128 0.881 2.268 1.303 3.408 7.358 19.904 9.188 40.19 8.848 61.273-0.403 24.92-4.986 48.97-13.462 72.77-3.598 10.1-7.878 19.286-13.751 29.212-2.532 4.279-5.328 8.397-8.314 12.371 1.477-1.965-0.896 1.071-0.984 1.18a101.05 101.05 0 0 1-2.255 2.636c-1.717 1.964-3.544 3.829-5.419 5.642-1.537 1.486-3.158 2.882-4.81 4.237-2.682 2.202 2.01-1.461-0.754 0.547-0.815 0.593-1.658 1.146-2.5 1.7-1.639 1.075-3.353 2.028-5.091 2.929-0.848 0.438-1.718 0.83-2.587 1.222 2.367-1.063-1.933 0.739-2.36 0.901-4.465 1.691-9.063 3.017-13.693 4.163-2.404 0.596-4.831 1.093-7.262 1.563-1.238 0.238-2.481 0.447-3.726 0.656-0.431 0.072-5.154 0.743-3.016 0.467-47.435 6.116-94.966-4.162-140.192-18.488-24.493-7.759-45.291-15.967-67.579-27.961-14.194-7.64-26.818 13.943-12.618 21.584z"
              fill="#FF0000"
              p-id="6820"
            ></path>
            <path
              d="M474.012 527c-0.013 1.547-0.166 3.086-0.342 4.622-0.42 3.672 0.417-2.841-0.03 0.255-0.2 1.383-0.42 2.764-0.643 4.143-0.992 6.133-2.114 12.245-3.182 18.365-2.643 15.135-5.154 30.366-6.269 45.701-0.873 12.015-1.357 26.377 5.101 37.075 8.395 13.906 24.729 11.996 36.73 4.308 10.502-6.728 17.423-16.065 23.205-26.955 6.839-12.882 12.12-26.9 15.342-41.127 2.923-12.904 4.754-27.796 0.231-40.573-5.208-14.712-18.039-22.846-33.519-22.57-16.103 0.287-16.13 25.287 0 25 1.099-0.02 6.68 0.528 2.642-0.081 1.485 0.225 2.929 0.649 4.337 1.16-3.759-1.363 0.209 0.298 1.217 0.996-4.241-2.939 2.726 3.844-0.347-0.304 0.803 1.084 1.438 2.283 2.021 3.494-1.807-3.753 0.102 0.601 0.406 1.712 0.274 0.999 1.053 6.082 0.53 1.951 0.241 1.907 0.314 3.834 0.343 5.755 0.025 1.748-0.058 3.497-0.167 5.241-0.06 0.946-0.731 6.654-0.237 3.068-0.572 4.158-1.46 8.271-2.479 12.34-0.969 3.875-2.145 7.698-3.419 11.482a164.077 164.077 0 0 1-2.024 5.618c-0.348 0.922-0.712 1.837-1.075 2.752-0.243 0.604-0.488 1.206-0.738 1.808 0.635-1.496 0.678-1.603 0.126-0.319-2.862 6.623-6.186 13.084-10.143 19.122a69.394 69.394 0 0 1-2.446 3.47c2.545-3.411-0.118 0.047-0.81 0.809a26.381 26.381 0 0 1-2.252 2.184c-2.524 2.19 2.015-1.482-0.518 0.404a63.3 63.3 0 0 1-2.846 1.977 43.04 43.04 0 0 1-3.902 2.276c-0.794 0.415-3.125 1.364 0.62-0.183-0.542 0.224-1.098 0.406-1.655 0.586a17.64 17.64 0 0 1-1.555 0.401c-2.126 0.476 3.486-0.348 1.4-0.189-3.43 0.26 3.082 0.965-0.026 0.058-1.821-0.531 3.217 1.514 1.547 0.64-0.889-0.465-2.261-1.729 1.242 1.067-0.314-0.251-0.594-0.544-0.872-0.833-1.331-1.387 2.042 2.815 0.915 1.206-0.526-0.752-0.933-1.584-1.311-2.417 1.992 4.39 0.273 0.296-0.052-0.973a36.38 36.38 0 0 1-0.483-2.267c-0.613-3.239 0.271 2.516-0.006 0.247-0.22-1.801-0.326-3.614-0.402-5.426-0.185-4.386-0.008-8.785 0.271-13.162 0.311-4.872 0.836-9.73 1.436-14.574 0.091-0.733 0.641-4.825 0.132-1.089 0.161-1.181 0.33-2.36 0.5-3.539a543.17 543.17 0 0 1 1.215-7.926c1.413-8.845 3.033-17.654 4.552-26.481 1.147-6.662 2.63-13.527 2.687-20.305 0.136-16.127-24.864-16.114-24.998 0z"
              fill="#FF0000"
              p-id="6821"
            ></path>
            <path
              d="M562.012 527c-0.013 1.547-0.166 3.086-0.342 4.622-0.42 3.672 0.417-2.841-0.03 0.255-0.2 1.383-0.42 2.764-0.644 4.143-0.991 6.133-2.113 12.245-3.182 18.365-2.643 15.135-5.154 30.366-6.269 45.701-0.873 12.015-1.356 26.377 5.102 37.075 8.395 13.906 24.728 11.996 36.729 4.308 10.502-6.728 17.423-16.065 23.205-26.955 6.839-12.882 12.12-26.9 15.342-41.127 2.923-12.904 4.754-27.796 0.231-40.573-5.208-14.712-18.039-22.846-33.519-22.57-16.103 0.287-16.131 25.287 0 25 1.099-0.02 6.68 0.528 2.642-0.081 1.485 0.225 2.929 0.649 4.337 1.16-3.759-1.363 0.209 0.298 1.217 0.996-4.241-2.939 2.726 3.844-0.347-0.304 0.803 1.084 1.438 2.283 2.021 3.494-1.807-3.753 0.102 0.601 0.406 1.712 0.274 0.999 1.053 6.082 0.53 1.951 0.241 1.907 0.314 3.834 0.343 5.755 0.025 1.748-0.058 3.497-0.167 5.241-0.06 0.946-0.731 6.654-0.237 3.068-0.572 4.158-1.46 8.271-2.479 12.34-0.969 3.875-2.145 7.698-3.419 11.482a164.077 164.077 0 0 1-2.024 5.618c-0.348 0.922-0.712 1.837-1.075 2.752-0.243 0.604-0.488 1.206-0.738 1.808 0.636-1.496 0.679-1.603 0.127-0.319-2.862 6.623-6.186 13.084-10.144 19.122a69.375 69.375 0 0 1-2.445 3.47c2.546-3.411-0.118 0.047-0.81 0.809a26.381 26.381 0 0 1-2.252 2.184c-2.524 2.19 2.015-1.482-0.518 0.404a63.3 63.3 0 0 1-2.846 1.977 43.04 43.04 0 0 1-3.902 2.276c-0.794 0.415-3.125 1.364 0.62-0.183-0.541 0.224-1.098 0.406-1.655 0.586a17.64 17.64 0 0 1-1.555 0.401c-2.127 0.476 3.486-0.348 1.4-0.189-3.43 0.26 3.082 0.965-0.026 0.058-1.821-0.531 3.217 1.514 1.548 0.64-0.89-0.465-2.261-1.729 1.241 1.067-0.314-0.251-0.594-0.544-0.871-0.833-1.331-1.387 2.041 2.815 0.914 1.206-0.526-0.752-0.933-1.584-1.311-2.417 1.992 4.39 0.273 0.296-0.053-0.973a35.672 35.672 0 0 1-0.483-2.267c-0.612-3.239 0.271 2.516-0.006 0.247-0.22-1.801-0.326-3.614-0.402-5.426-0.184-4.386-0.008-8.785 0.271-13.162 0.312-4.872 0.836-9.73 1.436-14.574 0.091-0.733 0.641-4.825 0.133-1.089 0.16-1.181 0.33-2.36 0.5-3.539a543.19 543.19 0 0 1 1.216-7.926c1.412-8.845 3.032-17.654 4.552-26.481 1.147-6.662 2.63-13.527 2.687-20.305 0.135-16.127-24.865-16.114-24.999 0z"
              fill="#FF0000"
              p-id="6822"
            ></path>
            <path
              d="M422.172 508.032c-2.599 48.068-10.185 95.792-10.285 144-0.034 16.123 24.966 16.12 25 0 0.101-48.208 7.686-95.932 10.285-144 0.368-6.81-5.965-12.5-12.5-12.5-7.092 0-12.132 5.698-12.5 12.5z"
              fill="#FF0000"
              p-id="6823"
            ></path>
          </svg>
        </aside>
        <div class="form-panel">
          <form>
            <h2>学生登录</h2>
            <BaseInput
              v-model="formData.studentId"
              :label="'学号'"
              :type="'text'"
            ></BaseInput>
            <BaseInput
              v-model="formData.username"
              :label="'姓名'"
              :type="'text'"
            ></BaseInput>
            <BaseInput
              v-model="formData.key"
              :label="'口令'"
              :type="'text'"
            ></BaseInput>
            <button type="button" @click="loginForUser('student')">登陆</button>
            <div class="remark">没有口令?请找出卷老师获取</div>
          </form>
          <div @click="flipFlag = true" class="switch-label">我是老师</div>
        </div>
      </div>
      <div class="login-panel teacher">
        <aside>
          <svg
            t="1605183153514"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="9350"
            width="100%"
            height="100%"
          >
            <path
              d="M832 200.96a32 32 0 0 0-32 32V556.8l-131.84-23.68-55.04 55.04 213.76 38.4a32.64 32.64 0 0 0 26.24-7.04 32 32 0 0 0 11.52-24.32V232.96a32 32 0 0 0-32.64-32z"
              fill="#7EDA2C"
              p-id="9351"
            ></path>
            <path
              d="M798.72 232.96a32 32 0 0 1 9.6-22.4l-636.16 635.52a32 32 0 1 0 45.44 45.44l581.12-581.12z"
              fill="#6A81AE"
              p-id="9352"
            ></path>
            <path
              d="M227.2 791.68V519.04L384 546.56l55.04-55.04L200.96 448a33.28 33.28 0 0 0-26.24 7.04 32 32 0 0 0-11.52 24.32v388.48a32 32 0 0 1 9.6-22.4z"
              fill="#7EDA2C"
              p-id="9353"
            ></path>
          </svg>
        </aside>
        <div class="form-panel">
          <form>
            <h2>教师登录</h2>
            <BaseInput
              v-model="formData.username"
              :label="'姓名'"
              :type="'text'"
              :warning="warnGroup.username"
            ></BaseInput>
            <BaseInput
              v-model="formData.password"
              :label="'密码'"
              :type="'password'"
              :warning="warnGroup.password"
            ></BaseInput>
            <BaseInput
              v-model="formData.email"
              :label="'邮箱'"
              :type="'email'"
              :warning="warnGroup.email"
            ></BaseInput>
            <button type="button" @click="loginForUser('teacher')">登陆</button>
            <div class="remark">
              <a href="#">忘记密码?点击此处找回</a>
            </div>
          </form>
          <div @click="flipFlag = false" class="switch-label">我是学生</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, ref, watch } from "vue";
import BaseInput from "@/components/BaseInput.vue";
import * as Api from "@/api/login.ts";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default {
  components: {
    BaseInput,
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const flipFlag = ref(true);
    const formData = reactive({
      studentId: "",
      username: "admin",
      password: "admin",
      email: "qq@qq.com",
      key: "",
    });
    const loginForUser = (identity: string) => {
      if (identity === "student") {
        // const loginUrl = "/student/login";
        // Api.login(loginUrl, formData).then((resp) => {
        // });
      } else if (identity === "teacher") {
        const loginUrl = "/teacher/login";
        Api.login(loginUrl, formData).then((resp) => {
          const data = resp.data;
          if (data && data.success) {
            store.commit("changeLoginUser", 1);
            router.push("/");
          } else {
            alert("登陆失败");
          }
        });
      }
    };
    const warnGroup = reactive({
      studentId: "",
      username: "",
      password: "",
      email: "",
      key: "",
    });
    const checkFormData = () => {
      const { studentId, username, password, email, key } = formData;
      //分别校验老师和学生的输入信息
      if (flipFlag.value) {
        if (username === "" && (password !== "" || email !== "")) {
          warnGroup.username = "姓名不能为空";
        }
        if (password === "" && email !== "") {
          warnGroup.password = "密码不能为空";
        }
        if (username !== "") {
          warnGroup.username = "";
        }
        if (password !== "") {
          warnGroup.password = "";
        }
        if (email !== "") {
          const reg = new RegExp(
            "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
          );

          if (!reg.test(email)) {
            warnGroup.email = "邮箱格式不正确";
          } else {
            warnGroup.email = "";
          }
        }
      } else {
        if (studentId === "" && (username !== "" || key !== "")) {
          warnGroup.username = "名字不能为空";
        }
      }
      return true;
    };
    watch(formData, checkFormData);
    return { flipFlag, formData, warnGroup, loginForUser };
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  --stu-main-color: greenyellow;
  --tea-main-color: #fdfc47;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(13, 158, 224);
  .login-panel-wrapper {
    position: relative;
    width: 600px;
    height: 400px;
    .login-panel {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      transition: 0.8s;
      perspective: 1000;
      display: flex;
      box-shadow: 0 0 25px rgba(12, 12, 12, 0.4);
      aside {
        width: 50%;
        height: 100%;
      }
      .form-panel {
        min-width: 300px;
        height: 100%;
        padding-top: 5%;
        h2 {
          text-align: center;
        }
        button {
          font-size: 1.075rem;
          letter-spacing: 2em;
          padding-left: 3em;
          margin: 0 0.8em;
          width: calc(100% - 1.6em);
          height: 2em;
        }
        .remark {
          cursor: default;
          padding-top: 0.4em;
          padding-right: 1em;
          font-size: 0.8em;
          text-align: right;
        }
        .switch-label {
          z-index: 3;
          font-size: 0.9rem;
          cursor: pointer;
          position: absolute;
          bottom: 1em;
          right: 0;
          width: 5.5em;
          height: 2em;
          line-height: 2em;
          padding-left: 1em;
          background: var(--tea-main-color);
        }
        .switch-label::before {
          z-index: 3;
          content: "";
          width: 0;
          height: 0;
          position: absolute;
          right: 100%;
          top: 0;
          // border-top: solid 1em transparent;
          border-right: solid 2em var(--tea-main-color);
          border-bottom: solid 2em transparent;
        }
      }
    }
    .student {
      z-index: 2;
      backface-visibility: hidden;
      background: var(--stu-main-color);
    }
    .teacher {
      z-index: 1;
      transform: rotateY(-180deg);
      background: var(--tea-main-color);
      .form-panel {
        .switch-label {
          background: var(--stu-main-color);
        }
        .switch-label::before {
          border-right: solid 2em var(--stu-main-color);
        }
      }
    }
  }
  .flip {
    .student {
      transform: rotateY(180deg);
    }
    .teacher {
      transform: rotateY(0);
    }
  }
}
@media screen and (max-width: 600px) {
  .wrapper {
    .login-panel-wrapper {
      width: 300px;
      .login-panel {
        aside {
          display: none;
        }
        .form-panel {
          width: 100%;
        }
      }
    }
  }
}
</style>